<template>
  <div class="usercar">
    <!-- 头部 -->
    <city-header :title="title"></city-header>
    <!-- 我的爱车部分 -->
    <div class="mycar" v-show="Object.keys(this.currentCar).length === 0 ? false : true">
      <div class="mycaritem" v-for="(item,index) in currentCar" :key="index">
        <div class="mycaritem-top">
          <img class="active" v-show="item.imgActive" src="../../../images/默认-标签.png" alt />
          <img :src="item.url" alt />
          <div class="mycaritem-top-right">
            <h1>{{item.name}} - {{item.carCc}}</h1>
            <h4>{{item.year}}款 {{item.displacement}}</h4>
          </div>
        </div>
        <div class="mycaritem-foot">
          <span>{{(item.carId).toString().replace(/,/g,'')}}</span>
          <div class="button">
            <button type="button" class="del" @click="delCar(index)">删除</button>
            <button type="button" @click="changeCar(index)">修改</button>
            <button
              type="button"
              class="set"
              v-show="item.buttonActive"
              @click="setActive(index)"
            >设为默认</button>
          </div>
        </div>
      </div>
    </div>

    <div class="nocar" v-show="Object.keys(this.currentCar).length === 0 ? true : false">
      <img src="../../../images/插画车.png" alt />
      <span>您还未添加爱车~</span>
    </div>

    <!-- 新增爱车按钮 -->
    <div class="addNewCarId-button">
      <mt-button type="primary" size="large" @click="addNewCar">新增爱车</mt-button>
    </div>
  </div>
</template>

<script>
import CityHeader from "../../city/components/CityHeader.vue";
import { mapState, mapMutations } from "vuex";
export default {
  data() {
    return {
      title: "我的爱车"
    };
  },
  computed: {
    ...mapState({
      currentCar: "car"
    })
  },
  components: {
    CityHeader
  },
  methods: {
    addNewCar() {
      this.$router.push("/home/addCar");
    },
    delCar(index) {
      this.$store.commit("delCarInfo", index);
    },
    changeCar(index) {
      this.$router.push("/home/addCar/carSelectCc/carSelectYear/addCarId");
      this.$store.commit("getChangeCarInfo", index);
    },
    setActive(index) {
      this.$store.commit("changeActive", index);
    }
  }
};
</script>

<style lang="scss">
.usercar {
  display: flex;
  flex-direction: column;
  height: 100%;
  .mycar {
    flex: 1 1;
    padding: 16px;
    overflow: scroll;
    .mycaritem {
      background-color: #ffffff;
      border-radius: 18px;
      margin-bottom: 16px;
      position: relative;
      .active {
        position: absolute;
        right: 0;
        top: 0;
      }
      .mycaritem-top {
        display: flex;
        border-bottom: 0.5px solid #e4e4e4;
        padding: 16px;
        img {
          width: 50px;
        }
        .mycaritem-top-right {
          margin-left: 16px;
          font-size: 0;
          h1 {
            line-height: 16px;
            font-size: 16px;
            color: #333333;
            padding: 0;
            margin-top: 6px 0 0 0;
          }
          h4 {
            font-size: 12px;
            color: #666666;
            margin-top: 10px;
            font-weight: normal;
          }
          //margin-left: 16px;
        }
      }
      .mycaritem-foot {
        display: flex;
        span {
          width: 89px;
          color: #333333;
          font-size: 14px;
          display: block;
          margin: 16.5px 9.5px 19px 16px;
        }
        .button {
          width: 228.5px;
          text-align: right;
          font-size: 0;
          padding-right: 16px;
          button {
            font-size: 14px;
            line-height: 14px;
            width: 59px;
            color: #333333;
            margin: 12px 0 12px 12px;
            padding: 6px 15.5px 5.5px 15.5px;
            border: 0.5px solid #ccc;
          }
          .del {
            margin: 12px 0;
          }
          .set {
            width: 70.5px;
            padding: 6px 7.5px 5.5px 7px;
          }
        }
      }
    }
  }
  .nocar {
    display: flex;
    flex-direction: column;
    flex: 1 1;
    font-size: 0;
    align-items: center;
    justify-content: center;
    background-color: #f3f3f3;
    img {
      width: 122.5px;
    }
    span {
      color: #cccccc;
      font-size: 12px;
      margin-top: 26.5px;
    }
  }
  .addNewCarId-button {
    height: 95px;
    padding: 25px 36px;
    button {
      font-size: 18px;
      height: 45px;
      border-radius: 22.5px;
      background-color: #293d7a;
    }
  }
}
html,
body {
  height: 100%;
  overflow: hidden;
}
.appcontainer[data-v-ec61c590] {
  padding: 0;
  height: 100%;
}
</style>